
import { useState, useEffect, Fragment } from 'react';

import PubSub from 'pubsub-js'
import { showAddProductModal, sendProductData } from '../../constant/PubSubKey'

import { Input, Typography, Modal, Dropdown, message } from 'antd';

//货物名称数据
import { productNameItems } from '../../constant/productNameData'
//单位数据
import { productUnitItems } from '../../constant/productUnitData'

import styles from './index.module.css'

//添加货物弹出框
function AddProduct(props) {
    const [messageApi, contextHolder] = message.useMessage();
    const { Text } = Typography;
    //父控件传过来的值
    const { } = props;
    //弹出框
    const [isModalOpen, setIsModalOpen] = useState(false);
    //商品信息
    const [productName, setProductName] = useState('')//名称
    const [productUnit, setProductUnit] = useState('')//单位
    const [productQuantity, setProductQuantity] = useState('')//数量
    const [productPrice, setProductPrice] = useState('')//单价
    const [productRemarks, setProductRemarks] = useState('')//备注

    //[]空数组相当于componentDidMount
    useEffect(() => {
        //返回的函数相当于unmountComponentAtNode
        const token = PubSub.subscribe(showAddProductModal, subscriber)//订阅消息
        initData();
        return () => {
            PubSub.unsubscribe(token);//解绑消息
        }
    }, []);

    //初始化数据
    function initData() {
        setProductName(productNameItems[0].name)
        setProductUnit(productUnitItems[0].name)
    }

    //接收订阅的消息
    const subscriber = function (msg, data) {
        //显示modal
        setIsModalOpen(true);
    };

    const handleOk = () => {
        if (productName.length === 0) {
            messageApi.error('请输入货物名称');
            return
        }
        if (productUnit.length === 0) {
            messageApi.error('请输入单位');
            return
        }
        if (productQuantity.length === 0) {
            messageApi.error('请输入数量');
            return
        }
        if (productPrice.length === 0) {
            messageApi.error('请输入单价');
            return
        }
        const id = Number(Date.now())
        PubSub.publish(sendProductData, { productName, productUnit, productQuantity, productPrice, productRemarks, id });
        //关闭弹框
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const clickProductName = ({ key }) => {
        const productName = productNameItems[key].name
        setProductName(productName)
    };

    const clickProductUnit = ({ key }) => {
        const productUnit = productUnitItems[key].name
        setProductUnit(productUnit)
    }

    function onChangeProductName(val) {
        let productName = val.target.value
        setProductName(productName);
    }

    function onChangeProductUnit(val) {
        let productUnit = val.target.value
        setProductUnit(productUnit);
    }

    function onChangeProductQuantity(val) {
        let productQuantity = val.target.value
        setProductQuantity(productQuantity);
    }

    function onChangeProductPrice(val) {
        let productPrice = val.target.value
        setProductPrice(productPrice);
    }

    function onChangeProductRemarks(val) {
        let productRemarks = val.target.value
        setProductRemarks(productRemarks);
    }

    //Modal 完全关闭后的回调
    function modalAfterClose() {
        //重置数据
        setProductName(productNameItems[0].name)
        setProductUnit(productUnitItems[0].name)
        setProductQuantity("");
        setProductPrice("")
        setProductRemarks("");
    }

    return (
        <Fragment >
            {contextHolder}
            <Modal
                afterClose={modalAfterClose}
                width={"30%"}
                title="增加货物信息"
                open={isModalOpen}
                okText={'增加货物'}
                onOk={handleOk}
                onCancel={handleCancel}>
                <div className={styles.product_info_box}>
                    <div className={styles.product_item_box}>
                        <Text className={styles.product_item_title} strong>货物名称：</Text>
                        <Dropdown trigger={['click']} menu={{ items: productNameItems, onClick: clickProductName }}>
                            <Input onPressEnter={handleOk} onChange={onChangeProductName} value={productName}
                                className={styles.inp_product_info} placeholder='货物名称' allowClear={true} size="large" />
                        </Dropdown>
                    </div>

                    <div className={styles.product_item_box}>
                        <Text className={styles.product_item_title} strong>单位：</Text>
                        <Dropdown trigger={['click']} menu={{ items: productUnitItems, onClick: clickProductUnit }}>
                            <Input onPressEnter={handleOk} onChange={onChangeProductUnit} value={productUnit}
                                className={styles.inp_unit} placeholder='单位' allowClear={true} size="large" />
                        </Dropdown>
                    </div>

                    <div className={styles.product_item_box}>
                        <Text className={styles.product_item_title} strong>数量：</Text>
                        <Input onPressEnter={handleOk} type={'number'} onChange={onChangeProductQuantity}
                            value={productQuantity} className={styles.inp_quantity} placeholder='数量' allowClear={true} size="large" />
                    </div>

                    <div className={styles.product_item_box}>
                        <Text className={styles.product_item_title} strong>单价：</Text>
                        <Input onPressEnter={handleOk} type={'number'} onChange={onChangeProductPrice}
                            value={productPrice} className={styles.inp_price} placeholder='单价(元)' allowClear={true} size="large" />
                    </div>

                    <div className={styles.product_item_box}>
                        <Text className={styles.product_item_title} strong>备注：</Text>
                        <Input onPressEnter={handleOk} onChange={onChangeProductRemarks}
                            value={productRemarks} className={styles.inp_remarks} placeholder='备注' allowClear={true} size="large" />
                    </div>
                </div>
            </Modal >
        </Fragment >
    )
}


export default AddProduct

